<template>
  <div class="search" :class='{focused: isFocused}'>
    <div class="input-box">
      <input v-model='keyword' @confirm='goList' @input='handleSearch' :placeholder='placeholder' type="text" @focus='handleFocus'/>
      <text class='cancel' @click='handleCancel'>取消</text>
    </div>
    <!-- 搜索结果 -->
    <div class="content">
      <div class="title">
        搜索历史
        <span class="clear" @click='clearCache'></span>
      </div>
      <div class="history">
        <navigator :url="'/pages/list/index?kw=' + item" :key='index' v-for='(item, index) in history'>
          {{item}}
        </navigator>
      </div>
      <!-- 结果 -->
      <scroll-view scroll-y class="result" v-show='keyword'>
        <navigator url='' :key='item.goods_id' v-for='item in result'>
          {{item.goods_name}}
        </navigator>
      </scroll-view>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Search',
        isFocused: false,
        keyword: '',
        placeholder: '',
        // 关键字搜索结果
        result: [],
        // 历史关键字列表
        history: uni.getStorageSync('history') || [],
        // 定时任务
        timer: null
      }
    },
    methods: {
      clearCache () {
        // 清除缓存：既要清除缓存也要清除页面
        uni.removeStorageSync('history')
        this.history = []
      },
      goList () {
        // 先换成历史关键字，再跳转到搜索列表页面
        this.history.unshift(this.keyword)
        // 先把去重后的数据更新到页面
        this.history = [...new Set(this.history)]
        // 再把去重后的数组放到缓存中
        uni.setStorageSync('history', this.history)
        // 跳转到商品列表页面
        uni.navigateTo({
          url: '/pages/list/index?kw=' + this.keyword
        })
      },
      handleSearch () {
        // 如果没有关键字，不允许发送请求
        if (!this.keyword) return
        // 根据关键字查询商品列表
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          const data = await this.$request('goods/qsearch', {
            query: this.keyword
          })
          if (data.meta.status === 200) {
            this.result = data.message
          } else {
            uni.showToast(data.meta.msg)
          }
        }, 1000)
      },
      handleFocus () {
        // 控制状态位，进而影响搜索栏底色
        this.isFocused = true
        this.placeholder = '请输入商品关键字'
        // 页面编程可用的高度
        let height = uni.getSystemInfoSync().windowHeight
        // 把高度传递到父组件
        this.$emit('get-height', height)
      },
      handleCancel () {
        // 取消搜索
        this.isFocused = false
        this.placeholder = ''
        this.$emit('get-height', 'auto')
        // 清除关键字
        this.keyword = ''
      }
    }
  }
</script>
<style lang="less">
  .search {
    .content {
      position: absolute;
      top: 100rpx;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 9999;
      display: none;
      background-color: #fff;
      padding: 30rpx;
      .title {
        font-size: 27rpx;
        line-height: 1;
        color: #333;
      }
      .clear {
        display: block;
        width: 27rpx;
        height: 27rpx;
        float: right;
        background-image: url(http://static.botue.com/ugo/images/clear.png);
        background-size: cover;
      }
      .history {
        padding-top: 30rpx;
        navigator {
          display: inline-block;
          line-height: 1;
          padding: 15rpx 20rpx 12rpx;
          background-color: #ddd;
          font-size: 24rpx;
          margin-right: 20rpx;
          margin-bottom: 15rpx;
          color: #333;
        }
      }
      .result {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        navigator {
          line-height: 1;
          padding: 20rpx 30rpx;
          font-size: 24rpx;
          color: #666;
          border-bottom: 1px solid #eee;
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    .input-box {
      background-color: #EB4450;
      padding: 20rpx;
      display: flex;
      position: relative;
      input {
        background-color: #fff;
        flex: 1;
        height: 60rpx;
        line-height: 60rpx;
        padding-left: 40rpx;
      }
      .cancel {
        display: none;
        width: 100rpx;
        text-align: center;
      }
      &::before {
        content: '';
        display: none;
        position: absolute;
        width: 32rpx;
        height: 32rpx;
        top: 50%;
        left: 0;
        transform: translate(25rpx, -50%);
        font-size: 24rpx;
        color: #ccc;
        background: url(http://static.botue.com/ugo/images/icon_search%402x.png);
        background-size: 32rpx;
        background-repeat: no-repeat;
      }
      &::after {
        content: '搜索';
        position: absolute;
        top: 50%;
        left: 50%;
        padding-left: 40rpx;
        transform: translate(-50%, -50%);
        font-size: 24rpx;
        color: #ccc;
        background: url(http://static.botue.com/ugo/images/icon_search%402x.png);
        background-size: 32rpx;
        background-repeat: no-repeat;
      }
    }
    &.focused {
      .content {
        display: block;
      }
      .input-box {
        background-color: #eee;
        &::before {
          display: block;
        }
        &::after {
          display: none;
        }
      }
      .cancel {
        display: block;
      }
    }
  }
</style>